import './index.scss'
import { ImageUrl } from '../Config/theme'
import { useNavigate, Outlet, useLocation, useParams } from 'react-router-dom'
import { useMount } from 'ahooks';
import { useEffect, useState } from 'react';
import { startTitleStore } from '../Config/zustand'
const Start = () => {
    const Navigate = useNavigate()
    const location = useLocation()
    const params = useParams()
    const [Status, setStatus] = useState(false)
    const [Active, setActive] = useState()

    const { projectTitle } = startTitleStore()


    useEffect(() => {
        setActive(params.page)
        if (location.pathname.includes('Home')) setStatus(false)
        else setStatus(true)
    }, [location])

    const onNav = (e) => {
        const { uuid } = params
        if (e !== Active) {
            Navigate(`/Start/Page/${e}${uuid ? '/' + uuid : ''}`)
        }
    }

    const onBack = () => {
        const { page, uuid } = params
        if (page) {
            Navigate(`/Start/Home${uuid ? '/' + uuid : ''}`)
        } else {
            Navigate(`/Start/Home`)
        }
    }
    const onNavTwo = (e) => {
        Navigate(e === 0 ? '/' : '/Admin')
    }

    const ActiveList = [
        { value: 'A01', label: '管理', color: '#4E7CD1', fill: '#0070FF' },
        { value: 'A02', label: '经营', color: '#9A4A4A', fill: '#C20202' },
    ]

    return (
        <div className='Start'>
            <img className='StartBack' src={ImageUrl + `${Active === 'A02' ? 'StartBackA02.png' : 'StartBack.png'}`} alt="" />
            <img className='StartNav' src={ImageUrl + `${Active === 'A02' ? 'StartNavA02.png' : 'StartNav.png'}`} alt="" />
            <img className='StartBtm' src={ImageUrl + `${Active === 'A02' ? 'StartBtmA02.png' : 'StartBtm.png'}`} alt="" />

            <div className='NavBox'>
                <div className='NavBox__Title'>
                    <img src={ImageUrl + `${Active === 'A02' ? 'StartLogoA02.png' : 'StartLogo.png'}`} alt="" />
                    <div style={{ color: Active === 'A02' ? 'white' : '#262626' }}>建投集团经济运行统计云平台</div>
                </div>
                <div className='NavBox__Name'>
                    <img src={ImageUrl + `${Active === 'A02' ? 'StartSelectA02.png' : 'StartSelect.png'}`} alt="" />
                    <div style={{ color: Active === 'A02' ? 'rgba(212, 13, 0, 1)' : 'white' }}>{projectTitle}</div>
                </div>
            </div>

            <div className='TopOptions'>
                {params.page || params.uuid ?
                    <div className='back' onClick={onBack}>
                        <img className='StartBack' src={ImageUrl + 'StartTopOptionsBack.png'} alt="" />
                        <div>返回上级</div>
                    </div> : <div></div>
                }
                <div className='options'>
                    <div onClick={() => onNavTwo(1)}>
                        <img className='StartBack' src={ImageUrl + 'StartTopOptionsAdmin.png'} alt="" />
                        <div>后台</div>
                    </div>
                    <div onClick={() => onNavTwo(0)}>
                        <img className='StartBack' src={ImageUrl + 'StartTopOptionsOff.png'} alt="" />
                        <div>退出</div>
                    </div>
                </div>
            </div>

            {Status &&
                <div className='NavTwoList'>
                    {ActiveList.map(({ value, label, color, fill }, index) =>
                        <div
                            key={index}
                            style={{ '--color': color, '--fill': fill }}
                            className={Active === value ? 'active' : ''}
                            onClick={() => onNav(value)}
                        >
                            {label}
                        </div>
                    )}
                </div>
            }
            <Outlet />
        </div>
    );
};

export default Start;

